<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /************
  Animations
*************/

        @import url(http://fonts.useso.com/css?family=Paytone+One);
        /***************
          Rock That Body
        ****************/

        @-webkit-keyframes bubble_rise {
            0% {
                bottom: 10px;
            }
            100% {
                bottom: 100%;
            }
        }
        @keyframes bubble_rise {
            0% {
                bottom: 10px;
            }
            100% {
                bottom: 100%;
            }
        }
        @-webkit-keyframes pop {
            0% {
                height: 7px;
                opacity: 0;
                width: 7px;
            }
            15% {
                opacity: 0.2;
            }
            25% {
                opacity: 0.2;
            }
            40% {
                height: 10px;
                opacity: 0;
                width: 10px;
            }
            100% {
                height: 10px;
                opacity: 0;
                width: 10px;
            }
        }
        @keyframes pop {
            0% {
                height: 7px;
                opacity: 0;
                width: 7px;
            }
            15% {
                opacity: 0.2;
            }
            25% {
                opacity: 0.2;
            }
            40% {
                height: 10px;
                opacity: 0;
                width: 10px;
            }
            100% {
                height: 10px;
                opacity: 0;
                width: 10px;
            }
        }
        body {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            background: #333;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            font-family: 'Paytone One', sans-serif;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        h1 {
            color: #c56c4b;
            font-size: 5em;
            line-height: 1.1em;
            margin-left: 0.5em;
            /****************************
          The Actual Glass & Bubblies
        *****************************/

            width: 300px;
        }
        .glass {
            background: #ebebe1;
            -webkit-clip-path: polygon(0 0, 100% 0, 89% 100%, 12% 100%);
            clip-path: polygon(0 0, 100% 0, 89% 100%, 12% 100%);
            height: 375px;
            position: relative;
            width: 240px;
        }
        .filling {
            background: rgba(218, 165, 71, 0.95);
            -webkit-clip-path: polygon(2% 0, 98% 0, 89% 100%, 12% 100%);
            clip-path: polygon(2% 0, 98% 0, 89% 100%, 12% 100%);
            height: 300px;
            margin-left: 5px;
            margin-top: 50px;
            width: 230px;
        }
        .bubble {
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-name: bubble_rise;
            animation-name: bubble_rise;
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            background-color: #f4b94f;
            border-radius: 100%;
            bottom: 10px;
            opacity: 0.2;
            box-shadow: inset 1px -2px 0px 2px #7d5d24;
            position: absolute;
        }
        .bubbles {
            height: 100%;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .bubbles .bubble-1 {
            -webkit-animation-delay: 0.11s;
            animation-delay: 0.11s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(1) {
            height: 8px;
            left: 25px;
            width: 8px;
        }
        .bubbles .bubble-2 {
            -webkit-animation-delay: 0.22s;
            animation-delay: 0.22s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(2) {
            height: 8px;
            left: 50px;
            width: 8px;
        }
        .bubbles .bubble-3 {
            -webkit-animation-delay: 0.33s;
            animation-delay: 0.33s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(3) {
            height: 8px;
            left: 75px;
            width: 8px;
        }
        .bubbles .bubble-4 {
            -webkit-animation-delay: 0.44s;
            animation-delay: 0.44s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(4) {
            height: 8px;
            left: 100px;
            width: 8px;
        }
        .bubbles .bubble-5 {
            -webkit-animation-delay: 0.55s;
            animation-delay: 0.55s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(5) {
            height: 9px;
            left: 125px;
            width: 9px;
        }
        .bubbles .bubble-6 {
            -webkit-animation-delay: 0.66s;
            animation-delay: 0.66s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(6) {
            height: 7px;
            left: 150px;
            width: 7px;
        }
        .bubbles .bubble-7 {
            -webkit-animation-delay: 0.77s;
            animation-delay: 0.77s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(7) {
            height: 10px;
            left: 175px;
            width: 10px;
        }
        .bubbles .bubble-8 {
            -webkit-animation-delay: 0.88s;
            animation-delay: 0.88s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(8) {
            height: 7px;
            left: 200px;
            width: 7px;
        }
        .bubbles .bubble-9 {
            -webkit-animation-delay: 0.99s;
            animation-delay: 0.99s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(9) {
            height: 9px;
            left: 225px;
            width: 9px;
        }
        .bubbles .bubble-10 {
            -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .bubbles .bubble:nth-child(10) {
            height: 9px;
            left: 250px;
            width: 9px;
        }
        .rim {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            height: 10px;
            -webkit-justify-content: space-around;
            /*-ms-flex-pack: distribute;*/
            justify-content: space-around;
            position: relative;
            width: 100%;
        }
        .rim .bubble {
            -webkit-animation: pop 1.3s linear infinite;
            animation: pop 1.3s linear infinite;
            box-shadow: inset 1px -2px 0px 2px rgba(125, 93, 36, 0.7);
            height: 10px;
            opacity: 0;
            position: relative;
            top: -4px;
            width: 10px;
        }
        .rim .bubble-1 {
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
        }
        .rim .bubble-2 {
            -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
        }
        .rim .bubble-3 {
            -webkit-animation-delay: 2.1s;
            animation-delay: 2.1s;
        }
        .rim .bubble-4 {
            -webkit-animation-delay: 2.8s;
            animation-delay: 2.8s;
        }
        .rim .bubble-5 {
            -webkit-animation-delay: 3.5s;
            animation-delay: 3.5s;
        }
        .rim .bubble-6 {
            -webkit-animation-delay: 4.2s;
            animation-delay: 4.2s;
        }
        .rim .bubble-7 {
            -webkit-animation-delay: 4.9s;
            animation-delay: 4.9s;
        }
        .rim .bubble-8 {
            -webkit-animation-delay: 5.6s;
            animation-delay: 5.6s;
        }
        .rim .bubble-9 {
            -webkit-animation-delay: 6.3s;
            animation-delay: 6.3s;
        }
        .rim .bubble-10 {
            -webkit-animation-delay: 7s;
            /************
          Highlights
        *************/

            animation-delay: 7s;
        }
        .highlight-1 {
            background: rgba(255, 255, 255, 0.25);
            height: 175px;
            position: absolute;
            right: 15%;
            top: 17%;
            -webkit-transform: skewX(-3deg);
            -ms-transform: skewX(-3deg);
            transform: skewX(-3deg);
            width: 15px;
            z-index: 1000;
        }
        .highlight-2 {
            background: rgba(255, 255, 255, 0.15);
            height: 105px;
            position: absolute;
            right: 23%;
            top: 17%;
            -webkit-transform: skewX(-3deg);
            -ms-transform: skewX(-3deg);
            transform: skewX(-3deg);
            width: 5px;
            z-index: 1000;
        }
        .highlight-3 {
            background: rgba(0, 0, 0, 0.15);
            bottom: 3.5%;
            height: 3px;
            left: 16%;
            position: absolute;
            width: 165px;
            z-index: 1000;
        }
        .highlight-4 {
            background: rgba(0, 0, 0, 0.1);
            bottom: 2%;
            height: 3px;
            left: 30%;
            position: absolute;
            width: 105px;
            z-index: 1000;
        }
        .highlight-5 {
            background: -webkit-linear-gradient(left, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.6));
            background: linear-gradient(to right, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.6));
            height: 300px;
            position: absolute;
            right: 8%;
            top: 13.25%;
            -webkit-transform: skewX(-4deg);
            -ms-transform: skewX(-4deg);
            transform: skewX(-4deg);
            width: 15px;
            z-index: 900;
        }
        .highlight-6 {
            background: -webkit-linear-gradient(right, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.6));
            background: linear-gradient(to left, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.6));
            height: 300px;
            left: 8%;
            position: absolute;
            top: 13.25%;
            -webkit-transform: skewX(4deg);
            -ms-transform: skewX(4deg);
            transform: skewX(4deg);
            width: 15px;
            z-index: 900;
        }
        .highlight-7 {
            background: -webkit-linear-gradient(top, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.5));
            background: linear-gradient(to bottom, rgba(125, 93, 36, 0), rgba(125, 93, 36, 0.5));
            bottom: 7%;
            height: 10px;
            left: 13%;
            position: absolute;
            -webkit-transform: skewX(4deg);
            -ms-transform: skewX(4deg);
            transform: skewX(4deg);
            width: 180px;
            z-index: 900;
        }
        .highlight-8 {
            background: rgba(0, 0, 0, 0.25);
            height: 3px;
            left: 0;
            position: absolute;
            top: 0;
            width: 240px;
            z-index: 900;
        }
    </style>
</head>
<body>
<div class="glass">
    <div class="highlights">
        <div class="highlight-1"></div>
        <div class="highlight-2"></div>
        <div class="highlight-3"></div>
        <div class="highlight-4"></div>
        <div class="highlight-5"></div>
        <div class="highlight-6"></div>
        <div class="highlight-7"></div>
        <div class="highlight-8"></div>
    </div>
    <div class="filling">
        <div class="rim">
            <!-- <div class="bubble bubble-5"></div> -->
            <div class="bubble bubble-10"></div>
            <div class="bubble bubble-1"></div>
            <div class="bubble bubble-7"></div>
            <!-- <div class="bubble bubble-2"></div> -->
            <div class="bubble bubble-9"></div>
            <div class="bubble bubble-3"></div>
            <!-- <div class="bubble bubble-8"></div> -->
            <div class="bubble bubble-4"></div>
            <!-- <div class="bubble bubble-9"></div> -->
        </div>
        <div class="bubbles">
            <div class="bubble bubble-9"></div>
            <div class="bubble bubble-5"></div>
            <div class="bubble bubble-8"></div>
            <div class="bubble bubble-2"></div>
            <div class="bubble bubble-7"></div>
            <div class="bubble bubble-10"></div>
            <div class="bubble bubble-1"></div>
            <div class="bubble bubble-4"></div>
            <div class="bubble bubble-3"></div>
            <div class="bubble bubble-6"></div>
        </div>
    </div>
</div>

<h1>Drink More Cider.</h1>
</body>
</html>